<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {load href="/static/layui/css/layui.css,/static/layui/layui.js"/}
    {load href="/static/bootstrap/css/bootstrap.min.css,/static/bootstrap/js/bootstrap.min.js"/}
    <style type="text/css">
        .chat_search_box{width:100%;height: 100%}
        .chat_search_box .chat_search_title{width: 100%;height: 15%;}
        .chat_search_box .chat_search_content{width: 100%;height: 85%;overflow: auto}
        .chat_search_box .search_line {width: 100%;list-style: none;margin: 0px;padding: 0px;}
        .chat_search_box .search_line .chat_search_result{height: 52.5px;border-bottom: 1px solid lightgrey;}
        .chat_search_box .search_line .chat_search_result .search_line_box{width: 50%;height:50px;float: left; }
        .chat_search_box .search_line .chat_search_result .search_line_btn{width: 50%;height:50px;float: right;text-align: center;line-height: 50px; }
        .chat_search_box .search_line .chat_search_result .search_line_wrapper{width: 50%;height: 100%; }
        .chat_search_box .search_line .chat_search_result .chat_line_interval{width: 2%;height: 100%; background-color: #009688;float: left;margin-left: 2px;}
        .chat_search_box .search_line .chat_search_result .search_line_img{float:left;width: 30%; height: 100%;margin-left: 2px;}
        .chat_search_box .search_line .chat_search_result .search_line_img img{margin: 0;padding: 0; width: 100%;height:100%;}
        .chat_search_box .search_line .chat_search_result .search_line_name{float:left;width: 30%; height: 100% ;text-align: center}
        .chat_search_box .search_line .chat_search_result .search_line_name span{display: block;height: 50%;font-size: 12px;font-family: '微软雅黑'}
        .chat_search_box .search_line .chat_search_result .search_result_message {width:37%;float:left; height:100%;font-family: '微软雅黑';font-size: 12px;}
    </style>
</head>
<body>
<div class="chat_search_box">
    <div class="chat_search_title">
        <div class="navbar">
        <div class="navbar-inner">
            <a class="brand" href="#">Title</a>
        </div>
       </div>
   </div>
    <div class="chat_search_content">
    <ul class="search_line site-doc-icon">
        <li class="chat_search_result">
            <div class="search_line_box">
                <div class="search_line_wrapper">
                    <div class="chat_line_interval"></div>
                    <div class="search_line_img">
                        <img src="__STATIC_IMG__/images/images.png" class="layui-circle">
                    </div>
                    <div class="search_line_name"><span>刘权昌</span><span>男</span></div>
                    <div class="search_result_message"><span class="message_text">111111111111111111111111111</span></div>
                </div>
            </div>
            <div class="search_line_btn">
                <button class="layui-btn layui-btn-small">申请加好友</button>
            </div>
        </li>
        <li class="chat_search_result">
            <div class="search_line_box">
                <div class="search_line_wrapper">
                    <div class="chat_line_interval"></div>
                    <div class="search_line_img">
                        <img src="__STATIC_IMG__/images/images.png" class="layui-circle">
                    </div>
                    <div class="search_line_name"><span>刘权昌</span><span>男</span></div>
                </div>
            </div>
            <div class="search_line_btn">
                <button class="layui-btn layui-btn-small">申请加入组</button>
            </div>
        </li>
    </ul>
     </div>
</div>
</body>
</html>